import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import classnames from 'classnames';
// import { UNIT_MAP } from '@/pages/official-doc/constants';
import { getMatterStandardUnit } from '@/services/laber-declare';
import { FormatDictData } from '@/utils/formatter';
interface Props {
  data: any;
}

const StandardCard: React.FC<Props> = props => {
  const { data } = props;
  //  请求页面中标准字典的列表
  const [matterStandardUnitMap, setMatterMap] = useState<object>({});
  const getMatterList = async () => {
    const matterData = await getMatterStandardUnit();
    const { map } = FormatDictData(matterData.data, 'uint', 'meaning');
    setMatterMap(map);
  };
  useEffect(() => {
    getMatterList();
  }, []);
  return (
    <div
      className={classnames(
        styles.standard,
        data.remark ? styles.withRemark : ''
      )}
    >
      <p
        className={classnames(
          styles.standardItem,
          data.remark ? 'ratio-border-bottom' : ''
        )}
      >
        <span className={styles.label}>{data.standardName}</span>
        <span className={styles.value}>
          {data.priceType === 0 || data.priceType?.[0] === 0
            ? data.minPrice || data.maxPrice
            : `${data.minPrice || 0}-${data.maxPrice || 0}`}
          {matterStandardUnitMap[data.unit]
            ? matterStandardUnitMap[data.unit].label
            : data.unit}
        </span>
      </p>
      <p className={classnames(styles.remark, !data.remark ? styles.hide : '')}>
        <span className={styles.remarkText}>备注</span>
        <span className={styles.remarkContent}>{data.remark}</span>
      </p>
    </div>
  );
};

export default StandardCard;
